﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestArrow.aspx.cs" Inherits="HMS.PL.Forms.TestArrow" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<script type="text/javascript" src="../Scripts/jquery-1.6.1.js"></script>
<script type="text/javascript" src="../Scripts/ui/jquery-ui.min.js"></script>
<script type="text/javascript" src="../Scripts/jsPlumb/jquery.jsPlumb-1.3.9-all-min.js.js"></script>
<script type="text/javascript" src="../Scripts/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../Scripts/ui/jquery-ui-1.8.16.custom.js"></script>
<script type="text/javascript" src="../Scripts/ui/jquery.ui.mouse.js"></script>
<%--<script type="text/javascript" src="../Scripts/ui/jquery.ui.draggable.js"></script>--%>
<%--    <script type="text/javascript" src="../Scripts/ui/jquery-ui-1.8.21.custom.js"></script>--%>
<script type="text/javascript" src="../Scripts/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../Scripts/formsScript/demoGraph.js"></script>

<script type="text/javascript" >

    jsPlumb.ready(function () {

        document.onselectstart = function () { return false; };
        var newDiv = $('<div id="first" class="myTest" style="left: 28px;top: 59px;">First</div>');
        var newDiv2 = $('<div id="second" class="myTest" style="left: 177px;top: 118px;">Second</div>');

        var revTest = false;
        var options = {
            revert: function (socketObj) {
                debugger;
                if (socketObj === false) {
                    revTest = true;
                    return true;
                } else {
                    revTest = false;
                    return false;
                }
            },
            scope: "foo",
            stop: function (e, ui) {
                debugger;
                if (revTest === true) {
                    //alert("#" + this.id + " Out of #target");
                    jsPlumb.repaint(this.id);
                }
            }
        };

        //to append div 
        $("body").prepend(newDiv).prepend(newDiv2);

        jsPlumb.draggable($(".myTest"), options);

        var options1 = {
            stop: function (e, ui) {
                if (revTest === true) {
                    //alert("#" + this.id + " Out of #target");
                    jsPlumb.repaint(this.id);
                }
            }
        };

        jsPlumb.draggable($(".myTest1"), options1);

        $("#target").droppable({ scope: "foo" });
        $("#target1").droppable({ scope: "foo" });


        var exampleDropOptions = {
            tolerance: 'touch',
            hoverClass: 'dropHover',
            activeClass: 'dragActive'
        };


        var color2 = "#316b31";
        var exampleEndpoint = {
            paintStyle: { fillStyle: color2 },
            isSource: true,
            connectorStyle: { strokeStyle: color2, lineWidth: 8 },
            connector: ["Bezier", { curviness: 63}],
            maxConnections: 3,
            isTarget: true,
            dropOptions: exampleDropOptions,
            connectorOverlays: [["Arrow", { location: 0.45}]]
        };

        var e1 = jsPlumb.addEndpoint("first", { anchor: [0.75, 0, 0, -1] }, exampleEndpoint);
        var e2 = jsPlumb.addEndpoint("second", { anchor: [0.75, 0, 0, -1] }, exampleEndpoint);

        var overlays = [
                ["Arrow", { location: 0.45}]
            ];

        jsPlumb.connect({ source: e1, target: e2, overlays: overlays });


        //my test 
        var e3 = jsPlumb.addEndpoint("a1", { anchor: [0.75, 0, 0, -1] }, exampleEndpoint);
        var e4 = jsPlumb.addEndpoint("a2", { anchor: [0.75, 0, 0, -1] }, exampleEndpoint);

        var overlays = [
                ["Arrow", { location: 0.45}]
            ];

        jsPlumb.connect({ source: e3, target: e4, overlays: overlays });
        ////////////////////////////
        var exampleDropOptionsP = {
            tolerance: 'touch',
            hoverClass: 'dropHover',
            activeClass: 'dragActive'
        };

        var colorP = "#316b31";
        var exampleEndpointP = {
            paintStyle: { fillStyle: colorP },
            isSource: true,
            connectorStyle: { strokeStyle: color2, lineWidth: 1 },
            connector: ["Straight", { curviness: 13}],
            maxConnections: 3,
            isTarget: true,
            dropOptions: exampleDropOptionsP,
            connectorOverlays: [["Arrow", { location: 0.85}]]
        };

        var e5 = jsPlumb.addEndpoint("node0", { anchor: [0.75, 0, 0, -1] }, exampleEndpointP);
        var e6 = jsPlumb.addEndpoint("node1", { anchor: [0.75, 0, 0, -1] }, exampleEndpointP);

        var overlaysP = [
                ["Arrow", { location: 0.45}]
            ];

        jsPlumb.connect({ source: e5, target: e6, overlays: overlaysP });

    });

</script>

<head runat="server">
    <style>
      
        #demo-frame
        {
            border: 1px solid #DDDDDD;
            clear: right;
            height: 500px;
            overflow-x: auto;
            position: relative; /* width: 520px;*/
        }
        
        .div
        {
            /*  background-color: Aqua;*/
            border: 1px solid #DDDDDD;
            height: 15x;
            margin: 10px;
            padding: 0.5em;
            cursor: pointer;
            width:50px;
        }
    
    </style>
    <style>
        #first,#second,#a1,#a2,#node0,#node1 {background: #000; width: 60px;height: 30px; padding:  10px;color:#FFF; margin: 10px; position: absolute;}
        #target ,#target1 { border:  1px solid red; width: 600px; height: 200px; margin-top: 20px;}
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div id="target"></div>

     <div id="target1">
         <div id="a1" class="myTest" style="left: 188px;top:304px;" >firest</div>
         <div id="a2" class="myTest" style="left: 251px;top: 363px;">second</div>
     </div>

     <div id="container0">
		<div id="node0" class="myTest1" style="left:88px;top:444px;">MAH</div>
       <%-- <div id="node1" class="myTest1" style="left:288px;top:444px;">NAGPUR</div>--%>
	</div>
	<div id="container1">
     <div id="node1" class="myTest1" style="left:288px;top:444px;">NAGPUR</div>
		<%--<div id="node1" style="left: 288px;top:444px;">NAGPUR</div>--%>
	</div>
  <%--  <div id="Div11" style="border: 1px solid red">
        <div class="demo" style="float: left;">
            <div id="Div4" class="ui-widget-content" style="border: 1px solid #DDDDDD; margin: 10px;
                background-color: Aqua; padding: 0.5em; height: 30px;">
                <p>
                    Maharashtra
                </p>
            </div>
            <div id="Div5" class="ui-widget-content" style="border: 1px solid #DDDDDD; margin: 10px;
                background-color: Coral; padding: 0.5em; height: 30px;">
                <p>
                    Gujrat
                </p>
            </div>
            <div id="Div6" class="ui-widget-content" style="border: 1px solid #DDDDDD; margin: 10px;
                background-color: Aqua; padding: 0.5em; height: 30px;">
                <p>
                    Delhi
                </p>
            </div>
        </div>
        <div class="demo" style="float: left;">
            <div id="Div3" class="ui-widget-content" style="border: 1px solid #DDDDDD; margin: 10px;
                background-color: Aqua; padding: 0.5em; height: 30px;">
                <p>
                    Maharashtra
                </p>
            </div>
            <div id="draggable" class="ui-widget-content" style="border: 1px solid #DDDDDD; margin: 10px;
                background-color: Goldenrod;">
                <p>
                    Mumbai</p>
            </div>
            <div id="Divg" class="ui-widget-content" style="border: 1px solid #DDDDDD; margin: 10px;
                background-color: Goldenrod; height: 30px; padding: 0.5em;">
                <p>
                    Nashik</p>
            </div>
            <div id="Div7" class="ui-widget-content" style="border: 1px solid #DDDDDD; margin: 10px;
                background-color: Aqua; padding: 0.5em; height: 30px;">
                <p>
                    Gujrat
                </p>
            </div>
            <div id="draggable2" class="ui-widget-content" style="border: 1px solid #DDDDDD;
                background-color: Goldenrod; margin: 10px;">
                <p>
                    ahmedabad</p>
            </div>
        </div>
        <!-- End demo -->
        <div id="2" style="float: left;">
            <div id="Div8" class="ui-widget-content" style="border: 1px solid #DDDDDD; margin: 10px;
                background-color: Goldenrod;">
                <p>
                    Mumbai</p>
            </div>
            <div id="Div1" class="ui-widget-content" style="border: 1px solid #DDDDDD; margin: 10px;
                background-color: FloralWhite; height: 30px; padding: 0.5em;">
                <p>
                    Chembur</p>
            </div>
            <div id="Div2" class="ui-widget-content" style="border: 1px solid #DDDDDD; margin: 10px;
                background-color: FloralWhite; height: 30px; padding: 0.5em;">
                <p>
                    Lower parel</p>
            </div>
            <div id="Div9" class="ui-widget-content" style="border: 1px solid #DDDDDD; margin: 10px;
                background-color: Goldenrod;">
                <p>
                    Nashik</p>
            </div>
            <div id="Div10" class="ui-widget-content" style="border: 1px solid #DDDDDD; margin: 10px;
                background-color: FloralWhite;">
                <p>
                    Trimbakeshwar</p>
            </div>
        </div>
    </div>--%>
    </form>
</body>
</html>
